<template>
    <!-- 课程管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="状态：">
                    <el-select v-model="formInline.status" placeholder="请选择" clearable>
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁止" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教练名称：">
                    <el-input v-model="formInline.nickname" placeholder="请输入教练姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="addCoach">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="60">
                </el-table-column>
                <el-table-column prop="nickname" align="center" label="教练姓名">
                </el-table-column>
                <el-table-column prop="mobile" align="center" label="登录账号（手机号）">
                </el-table-column>
                <!-- <el-table-column prop="image" align="center" label="所属校区">
                </el-table-column> -->

                <el-table-column prop="status" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.status === 1 ? '启用' : '禁止' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" align="center" label="创建时间">
                </el-table-column>
                <el-table-column align="center" label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="success" plain icon="el-icon-update" @click="handleUpdatePassword(scope.row)">修改密码</el-button>
                        <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 新增操作人员弹框 -->
        <el-dialog :title="title" :visible.sync="dialogInfo" width="40%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio v-model="form.status" :label="1">启用</el-radio>
                    <el-radio v-model="form.status" :label="2">禁用</el-radio>
                </el-form-item>
                <template v-if="!isEdit">
                    <el-form-item label="密码">
                        <el-input v-model="form.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="form.confirm_password" type="password"></el-input>
                    </el-form-item>
                </template>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogInfo = false">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改密码弹框 -->
        <el-dialog title="修改密码" :visible.sync="dialogPassword" width="40%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="editForm" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="新密码:" prop="new">
                            <el-input v-model="editForm.new" type="password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="确认密码" prop="queren">
                            <el-input v-model="editForm.confirm_password" type="password"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogPassword = false">取 消</el-button>
                <el-button type="primary" @click="goToUpdatePassword">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: "coach",
    data() {
        return {
            formInline: {
                nickname: "",
                status: "",
            },
            form: {
                nickname: "",
                mobile:"",
                status:"",
                password:"",
                confirm_password:"",

            },
            editForm:{
                new:"",
                confirm_password: "",

            },
            tableData: [],
            dialogInfo: false, //默认新增课程弹框隐藏
            dialogPassword:false,//修改密码弹框隐藏
            title: "新增教练 ", //默认新增
            isEdit: false, //默认为新增
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,
            id:0,
            password_id:0,

        };
    },
    created() {
        this.getCoachList(this.page,this.limit);
    },
    activated() {
       this.getCoachList(this.page,this.limit);
    },
    methods: {
        getCoachList(page, limit) {
            let params = {
                role_id:3,
                page: page,
                per_page: limit,
                nickname: this.formInline.nickname,
                status: this.formInline.status,

            };
            this.$get(this.$api.adminApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        addCoach(){
            this.dialogInfo = true;
            this.title = "新增";
            this.form.nickname ="";
            this.form.mobile="";
            this.form.password="";
            this.form.confirm_password="";
            this.isEdit=false;

        },
        // 点击编辑按钮
        handleEdit(row) {
            this.title = "编辑";
            this.id = row.id;
            this.form.nickname = row.nickname;
            this.form.mobile = row.mobile;
            this.form.status = row.status;
            this.dialogInfo = true;
            this.isEdit = true;
        },
        handleUpdatePassword(row){
            this.dialogPassword=true;
            this.password_id=row.id;

        },
        goToUpdatePassword(){
            if (this.editForm.new == "") {
                return this.$message.error("请输入新密码！");
            } else if (this.editForm.confirm_password == "") {
                return this.$message.error("请输入确认密码！");
            } else if (this.editForm.new != this.editForm.confirm_password) {
                return this.$message.error("密码不一致，请重新输入！");
            } else {
                let params = {
                    admin_id: this.password_id, //操作人员id
                    new_password: this.editForm.new,
                    check_password: this.editForm.confirm_password,
                };
                this.$post(this.$api.updateAdminPassword, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogPassword = false;
                        return this.$message.success("密码修改成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });
            }

        },
        // 点击编辑弹框取消按钮
        goToEdit() {
            this.dialogInfo = false;
            this.isEdit = false;
        },

        // 点击删除按钮
        handleDelete(row) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.adminApi + "/" + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getCoachList(this.page, this.limit);
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getCoachList(this.page, this.limit);
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getCoachList(this.page, this.limit);
        },
        // 点击查询按钮
        submitForm() {
            this.getCoachList(this.page, this.limit);
        },

        // 提交课程数据确定按钮
        submitData() {
            if (this.form.nickname == "") {
                return this.$message.error("请输入姓名！");
            }
            if (this.form.mobile == "") {
                return this.$message.error("请输入手机号！");
            }
            if (this.form.status == "") {
                return this.$message.error("请选择状态！");
            }
            let params = {
                nickname: this.form.nickname,
                mobile: this.form.mobile,
                status: this.form.status,
                role_id:3,
            };
            if (this.isEdit) {
                this.$put(this.$api.adminApi + "/" + this.id, params).then(
                    (res) => {
                        if (res.code == 200) {
                            this.form.status = false;
                            this.dialogInfo = false;
                            this.getCoachList(this.page, this.limit);
                            return this.$message.success("编辑成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }
                );

            } else {
                if(this.form.password==""){
                    return this.$message.error("请输入密码！");
                }
                if(this.form.confirm_password==""){
                    return this.$message.error("请输入确认密码！");
                }
                if(this.form.password!=this.form.confirm_password){

                    return this.$message.error("两次输入密码不一致！");
                }
                params.password = this.form.password;
                this.$post(this.$api.adminApi, params).then((res) => {
                    if (res.code == 200) {
                        this.form.status = false;
                        this.dialogInfo = false;
                        this.getCoachList(this.page, this.limit);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });

            }
        },
    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.is-selected {
    color: #1989FA;
}
</style>
